<template>
  <container-item-wrapper :widget="widget">
    <div :key="widget.id" class="tab-container" v-show="!widget.options.hidden">
      <el-collapse
        v-model="activeNames"
        :type="widget.displayType"
        :ref="widget.id"
        :class="[customClass]"
        :accordion="widget.options.collapse.accordion"
      >
        <el-collapse-item
          v-for="(tab, index) in widget.tabs"
          :key="index + 1 + ''"
          :title="tab.title"
          :name="index + 1 + ''"
        >
          <template v-for="(subWidget, swIdx) in tab.widgetList">
            <template v-if="'container' === subWidget.category">
              <component
                :is="subWidget.type + '-widget'"
                :widget="subWidget"
                :designer="designer"
                :key="subWidget.id"
                :parent-list="tab.widgetList"
                :index-of-parent-list="swIdx"
                :parent-widget="widget"
              ></component>
            </template>
            <template v-else>
              <component
                :is="subWidget.type + '-widget'"
                :field="subWidget"
                :designer="designer"
                :key="subWidget.id"
                :parent-list="tab.widgetList"
                :index-of-parent-list="swIdx"
                :parent-widget="widget"
                :design-state="true"
              ></component>
            </template>
          </template>
        </el-collapse-item>
      </el-collapse>
    </div>
  </container-item-wrapper>
</template>

<script>
import emitter from "@/utils/emitter";
import i18n from "../../../utils/i18n";
import refMixin from "../../../components/form-render/refMixin";
import ContainerItemWrapper from "./container-item-wrapper";
import containerItemMixin from "./containerItemMixin";
import FieldComponents from "@/components/form-designer/form-widget/field-widget/index";

export default {
  name: "collapse-item",
  componentName: "ContainerItem",
  mixins: [emitter, i18n, refMixin, containerItemMixin],
  components: {
    ContainerItemWrapper,
    ...FieldComponents,
  },
  props: {
    widget: Object,
  },
  inject: ["refList", "sfRefList", "globalModel"],
  data() {
    return {
      activeTabName: "",
    };
  },
  computed: {
    visibleTabs() {
      return this.widget.tabs.filter((tp) => {
        return !tp.options.hidden;
      });
    },
  },
  created() {
    this.initRefList();
  },
  mounted() {
    this.initActiveTab();
  },
  beforeDestroy() {
    this.unregisterFromRefList();
  },
  data() {
    return {
      activeNames: ["1"],
      //
    };
  },
  methods: {
    initActiveTab() {
      if (this.widget.type === "collapse" && this.widget.tabs.length > 0) {
        this.activeNames = this.widget.tabs.map((v,index)=>{
          if(v.options.active){
            return (index + 1).toString();
          }
          return null;
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
